const plugin = require('tailwindcss/plugin')

module.exports = {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  darkMode: 'class',
  theme: {
    extend: {
      boxShadow: {
        '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.08)',
        '3xl': '0 0 10px 0 rgba(0, 0, 0, 0.5)'
      },
      colors: {
        gray: {
          50: '#FAFAFA',
          100: '#F4F4F5',
          200: '#E4E4E7',
          300: '#D4D4D8',
          400: '#A2A2A8',
          500: '#6E6E76',
          600: '#52525A',
          650: '#515151',
          700: '#3F3F45',
          800: '#2E2E33',
          900: '#1D1D20'
        },
        teal: {
          50: '#F4FFFD',
          100: '#E6FFFA',
          200: '#B2F5EA',
          300: '#81E6D9',
          400: '#4FD1C5',
          500: '#3ABAB4',
          600: '#319795',
          700: '#2C7A7B',
          800: '#285E61',
          900: '#234E52'
        },
        indigo: {
          50: '#F8FBFF',
          100: '#EBF4FF',
          200: '#C3DAFE',
          300: '#A3BFFA',
          400: '#7F9CF5',
          500: '#667EEA',
          600: '#5A67D8',
          700: '#4C51BF',
          800: '#34399B',
          900: '#1E2156'
        },
        purple: {
          50: '#FAF5FF',
          100: '#F3E8FF',
          200: '#E9D8FD',
          300: '#D6BCFA',
          400: '#B794F4',
          500: '#9F7AEA',
          600: '#805AD5',
          700: '#6B46C1',
          800: '#553C9A',
          900: '#44337A'
        },
        pink: {
          50: '#FFF5F7',
          100: '#FFEBEF',
          200: '#FED7E2',
          300: '#FBB6CE',
          400: '#F687B3',
          500: '#ED64A6',
          600: '#D53F8C',
          700: '#B83280',
          800: '#97266D',
          900: '#702459'
        },
        red: {
          650: '#C00000'
        }
      },
      outline: {
        blue: '2px solid rgba(0, 112, 244, 0.5)'
      },
      spacing: {
        128: '32rem',
        '9/16': '56.25%',
        '3/4': '75%',
        '1/1': '100%'
      },
      fontFamily: {
        inter: ['Inter', 'sans-serif'],
        'red-hat-display': ['"Red Hat Display"', 'sans-serif']
      },
      fontSize: {
        xs: ['0.75rem', { lineHeight: '1.5' }],
        sm: ['0.875rem', { lineHeight: '1.5' }],
        base: ['1rem', { lineHeight: '1.5' }],
        lg: ['1.125rem', { lineHeight: '1.5' }],
        xl: ['1.25rem', { lineHeight: '1.5' }],
        '2xl': ['1.63rem', { lineHeight: '1.35' }],
        '3xl': ['2.63rem', { lineHeight: '1.24' }],
        '4xl': ['3.5rem', { lineHeight: '1.18' }],
        '5xl': ['4rem', { lineHeight: '1.16' }],
        '6xl': ['5.5rem', { lineHeight: '1.11' }],
        def: ['1rem', { lineHeight: '1.7', fontWeight: 400 }],
        '2def': ['2.125rem', { lineHeight: '1', fontWeight: 700 }],
        4: ['1rem', { lineHeight: '1.5' }],
        4.5: ['1.125rem', { lineHeight: '1.5' }],
        5: ['1.25rem', { lineHeight: '1.5' }],
        5.5: ['1.375rem', { lineHeight: '1.5' }],
        6: ['1.5rem', { lineHeight: '1.5' }],
        6.5: ['1.625rem', { lineHeight: '1.5' }],
        8: ['2rem', { lineHeight: '1.5' }],
        19: ['1.1875rem', { lineHeight: '1' }]
      },
      lineHeight: {
        4.5: '1.125rem',
        11: '2.75rem',
        12: '3rem',
        14: '3.5rem',
        16: '4rem'
      },
      inset: {
        '1/2': '50%',
        full: '100%'
      },
      letterSpacing: {
        snugger: '-0.04em',
        tighter: '-0.02em',
        tight: '-0.01em',
        normal: '0',
        wide: '0.01em',
        wider: '0.02em',
        widest: '0.4em'
      },
      scale: {
        98: '.98'
      },
      animation: {
        float: 'float 5s ease-in-out infinite'
      },
      keyframes: {
        float: {
          '0%, 100%': { transform: 'translateY(0)' },
          '50%': { transform: 'translateY(-10%)' }
        }
      },
      zIndex: {
        '-1': '-1',
        '-10': '-10'
      },
      // 圆角
      borderRadius: {
        '6xl': '3.75rem'
      },
      height: {
        10.5: '2.625rem',
        11: '2.75rem',
        63: '15.75rem',
        80: '20rem',
        85: '20.75rem',
        95: '25.75rem',
        112.5: '28.125rem',
        118: '29.5rem',
        121: '30.25rem',
        129: '32.25rem',
        135: '33.75rem',
        139: '34.75rem',
        143: '36rem',
        160: '40rem'
      },
      width: {
        46: '11.5rem',
        50: '12.5rem',
        62.5: '15.625rem',
        63: '15.75rem',
        105: '26.25rem',
        129: '32.25rem',
        225: '56.25rem',
        250: '62.5rem',
        256: '64rem',
        275: '68.75rem',
        285: '71.25rem',
        300: '75rem',
        320: '80rem',
        339.5: '84.875rem',
        380: '95rem',
        390: '97.5rem',
        395: '98.75rem',
        // 94%
        '94%': '94%'
      },
      minWidth: {
        10: '2.5rem'
      },
      maxWidth: {
        250: '62.5rem',
        275: '68.75rem',
        284: '71rem',
        300: '75rem',
        320: '80rem',
        345: '86.25rem',
        380: '95rem',
        390: '97.5rem',
        '1/4': '25%'
      },
      margin: {
        7.5: '1.875rem',
        12.5: '3.125rem'
      },
      padding: {
        3.75: '0.9375rem',
        5: '1.25rem',
        7.5: '1.875rem'
      },
      strokeWidth: {
        24: '6rem'
      },
      textUnderlineOffset: {
        2: '2px',
        3: '3px'
      }
    }
  },
  plugins: [
    // eslint-disable-next-line global-require
    require('@tailwindcss/forms'),
    plugin(function ({ addComponents }) {
      addComponents({
        '.banner-mask': {
          position: 'absolute',
          inset: '0',
          backgroundColor: 'rgba(0, 0, 0, 0.5)',
          content: "''"
        }
      })
    })
  ]
}
